﻿
/*本样式表储存了有关布局的样式*/

/*PC平台*/
@media only screen and (min-width : 1224px)
{
    /*全局样式*/
    :root
    {
        /*全局中等gap属性*/
        --gapMedium: 1.75ch;
        /*全局中等padding属性*/
        --paddingMedium: 1ch;
    }
}

/*平板平台*/
@media only screen and (min-width : 667px) and (max-width : 1224px)
{
    /*全局样式*/
    :root
    {
        /*全局中等gap属性*/
        --gapMedium: 1.25ch;
        /*全局中等padding属性*/
        --paddingMedium: 0.75ch;
    }
}

/*手机平台*/
@media only screen and (max-width : 667px)
{
    /*全局样式*/
    :root
    {
        /*全局中等gap属性*/
        --gapMedium: 1ch;
        /*全局中等padding属性*/
        --paddingMedium: 0.75ch;
    }
}

/*横向屏幕，即宽大于高，一般用于电脑*/
@media (orientation: landscape)
{
}

/*竖向屏幕，即高大于宽，一般用于手机*/
@media (orientation: portrait)
{
    /*横屏显示*/
    .horizontalScreen
    {
        min-width: 100vh;
        min-height: 100vw;
        transform-origin: left top;
        transform: translateX(100vw) rotate(90deg)
    }
}

/*全局样式*/
:root
{
    /*全局极端紧凑gap属性*/
    --gapExtremeSmall: calc(var(--gapMedium) * 0.25);
    /*全局紧凑gap属性*/
    --gapSmall: calc(var(--gapMedium) * 0.5);
    /*全局宽松gap属性*/
    --gapBig: calc(var(--gapMedium) * 2);
    /*全局极端紧凑padding属性*/
    --paddingExtremeSmall: calc(var(--paddingMedium) * 0.25);
    /*全局紧凑padding属性*/
    --paddingSmall: calc(var(--paddingMedium) * 0.5);
    /*全局宽松padding属性*/
    --paddingBig: calc(var(--paddingMedium) * 2);
}

/*相对于父元素的中部居中布局，水平垂直方向皆居中*/
.centerMiddRelatively
{
    display: grid;
    grid-template: 1fr auto 1fr/1fr auto 1fr;
    left: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%
}

/*占满屏幕布局*/
.occupyScre
{
    position: absolute;
    left: 0;
    top: 0;
    min-width: 100vw;
    min-height: 100vh;
}

/*相对于屏幕的中部居中布局，水平垂直方向皆居中*/
.centerMiddAbsolute
{
    position: absolute;
    display: grid;
    grid-template: 1fr auto 1fr/1fr auto 1fr;
    left: 0;
    top: 0;
    min-width: 100vw;
    min-height: 100vh;
}

/*中部居中元素布局*/
.centerMiddleEleme
{
    grid-area: 2/2
}

/*虚拟化容器的CSS样式*/
.virtualizationContainer
{
    overflow-y: auto;
    max-height: 100dvh;
}

/*简单虚拟化容器的CSS样式*/
.virtualizationSimpleContainer
{
    display: grid;
    gap: var(--gapMedium);
}

    /*简单虚拟化容器的第一个CSS样式*/
    .virtualizationSimpleContainer > :first-child
    {
        margin-top: var(--gapMedium);
    }

/*豆腐块组件容器的CSS样式*/
.tofuCubesContainer
{
    display: grid;
    grid-template: auto auto/1fr auto 1fr
}

/*豆腐块组件图标的CSS样式*/
.tofuCubesIcon
{
    grid-column: 2
}

/*豆腐块文本容器样式*/
.tofuCubesTextContainer
{
    grid-area: 2/1/-1/-1;
}

/*豆腐块组件文本的CSS样式*/
.tofuCubesText
{
    text-align: center;
}

/*文本渲染组件的容器样式*/
.textRenderingContainer
{
    overflow-wrap: break-word;
    white-space: pre-line;
    margin: 0;
}

/*自动播放按钮容器样式*/
.autoPlayButtonCntainer
{
    display: grid;
    grid-template: 1fr 1fr 1fr/1fr 1fr 1fr
}

/*自动播放按钮容器的第一个元素样式*/
div.autoPlayButtonCntainer > *:first-child
{
    grid-area: 1/1/-1/-1
}


/*播放按钮的公共样式*/
.playButton
{
    grid-area: 2/2;
    background-color: rgba(128,128,128,0.5);
    border-radius: 50%;
    cursor: pointer;
    width: 100%;
    max-width: 4em;
}

/*表示一个CSS居中布局*/
.center
{
    display: flex;
    align-items: center;
    justify-content: center;
}

/*表示一个换行样式*/
.wrap
{
    white-space: pre-wrap;
}
